<template>
  <scroll-view class="scroll-view" scroll-y>
    <view v-if="list.length>0" class="received_item" v-for="(ele, index) in props.list">
      <view class="received_name">{{ ele.taskName }}</view>
      <view class="received_handle">
        <view class="received_user">执行人: {{ ele.executorName }}</view>
        <view :class="ele.approveStatus==='2'?'red':'doing'" class="remindDate_time">{{getName(ele.approveStatus)}}</view>
      </view>
    </view>
    <fl-empty v-if="list.length == 0" />
  </scroll-view>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import modal from "@/plugins/modal";

const props = defineProps({
  list: {},
});
const getName = (status) => {
  // 审批状态：0.待接收，2进行中，1/3已完成
  switch (status) {
    // 空.待接收，0.进行中，1.已提交，2.审核通过，3.审核拒绝
    case "0":
      return "进行中";
    case "1":
      return "进行中";
    case "2":
      return "已完成";
    case "3":
      return "进行中";
    default:
      return "待接收";
  }
};
</script>

<style lang="scss" scoped>
page {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
.scroll-view {
  height: 100%;

  .received_item {
    width: 685rpx;
    height: 200rpx;
    background-color: #fff;
    border-radius: 12rpx;
    margin: 0 auto 0rpx;
    padding: 15rpx 25rpx;
    border-bottom: 1rpx solid #eeeeee;
    // &:nth-child(1) {
    //   margin-top: 20rpx;
    // }
    .received_name {
      font-size: 28rpx;
      color: #323233;
      min-height: 80rpx;
      // font-weight: 700;
      margin-bottom: 11rpx;
      overflow: hidden; //超出文本隐藏
      text-overflow: ellipsis; ///超出部分省略号显示
      display: -webkit-box; //弹性盒模型
      -webkit-box-orient: vertical; //上下垂直
      -webkit-line-clamp: 2; //自定义行数
    }
    .received_handle {
      display: flex;
      align-items: center;
      margin-top: 30rpx;
      .received_user {
        font-size: 28rpx;
        color: #999999;
      }
      .remindDate_time {
        font-size: 24rpx;
        color: #fff;
        margin-left: 20rpx;
        padding: 2rpx 5rpx;
        background-color: red;
        border-radius: 8rpx;
      }
      .red {
        background-color: #0dbea8;
      }
      .doing {
        background-color: #fb9825;
      }
      .received_btn {
        width: 220rpx;
        height: 60rpx;
        background-color: #0d80d7;
        color: #fff;
        text-align: center;
        line-height: 60rpx;
        font-size: 28rpx;
        border-radius: 30rpx;
      }
    }
  }
}
</style>
